<template>
  <div class="login">
    <!-- 登录表单 -->
    <div class="loginBox" v-show="login">
      <div class="title">登录</div>
      <van-form @submit="onSubmit">
        <van-field
          v-model="username"
          name="username"
          label="用户名"
          placeholder="用户名"
          maxlength="11"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="password"
          type="password"
          name="password"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <div style="margin: 16px;">
          <van-button round block type="danger" native-type="submit">提交</van-button>
        </div>
      </van-form>
    </div>

    <!-- 注册表单 -->
    <div class="registerBox" v-show="!login">
      <div class="title">注册</div>
      <van-form @submit="onSubmitRegister">
        <van-field
          v-model="registerFrom.nickname"
          name="nickname"
          label="用户名"
          placeholder="用户名"
          maxlength="11"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="registerFrom.account"
          name="account"
          label="手机号"
          placeholder="手机号"
          maxlength="11"
          :rules="rulesAccount"
        />
        
        <van-field
          v-model="registerFrom.password"
          type="password"
          name="password"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <van-field
          v-model="registerFrom.password1"
          type="password"
          name="password1"
          label="重复密码"
          placeholder="重复密码"
          :rules="rulesPassword"
        />
        <van-field
          v-model="registerFrom.captcha"
          name="captcha"
          label="验证码"
          placeholder="验证码"
          maxlength="11"
          :rules="[{ required: true, message: '请填写验证码' }]"
        >
          <template #button>
            <van-button @click="getCode" size="small" type="info">{{ codeText }}</van-button>
          </template>
        </van-field>
        <div style="margin: 16px;">
          <van-button round block type="danger" native-type="submit">提交</van-button>
        </div>
      </van-form>
    </div>

    <!-- 切换表单 -->
    <div class="bottomBox">
      <div class="register" v-show="login" @click="isLogin(false)">还没有账号？点击注册</div>
      <div class="register" v-show="!login" @click="isLogin(true)">已经有账号？点击登录</div>
    </div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'

import {
  login,
  verifyCode,
  register,
} from '@/api/login'

export default {
  data() {
    return {
      login: true, // 登录状态
      username: '', // 用户名
      password: '', // 密码
      registerFrom: { // 注册表单
        nickname: '',
        account: '',
        password: '',
        password1: '',
        captcha: '',
      },
      falg: true, // 节流阀
      timeout: null, // 倒计时
      codeText: '发送验证码', // 
      rulesAccount: [
        { required: true, message: '请填写手机号' },
        { pattern: /^(13|14|15|16|17|18|19)\d{9}$/, message: '请输入正确手机号' },
      ],
      rulesPassword: [
        { required: true, message: '请再次输入密码' },
        { validator: this.validator, message: '两次输入的密码不一致' },
      ]
    }
  },
  created() {

  },
  methods: {
    // 绑定vuex的方法
    ...mapMutations(['setUser', 'setToken']),

    // 登录表单提交
    async onSubmit(e) {
      const res = await login(e)
      if(res.status === 200) {
        localStorage.setItem('token', res.data?.token)
        this.setToken(res.data?.token)
        this.$toast.success(res.msg);
        this.$router.back()
      }else this.$toast.fail(res.msg);
    },

    // 注册表单提交
    async onSubmitRegister(e) {
      const res = await register(e)
      // console.log(res);
      if(res.status !== 200) return this.$toast.fail(res.msg)
      this.$toast.success(res.msg)
      this.isLogin(true)
    },

    // 密码表单验证
    validator(val) {
      return this.registerFrom?.password === val
    },

    // 获取验证码
    async getCode() {
      if(!this.falg) return
      this.countdown(60)
      const { data } = await verifyCode({
        phone: this.registerFrom.account,
        type: 'register'
      })
      if(data) this.registerFrom.captcha = data
    },

    // 倒计时
    countdown(val) {
      if(val === 0) {
        this.codeText = '重新发送'
        clearTimeout(this.timeout)
        return
      }
      this.codeText = val + 's'
      this.timeout = setTimeout(() => this.countdown(--val), 1000)
    },

    // 表单切换
    isLogin(val) {
      if(val) {
        this.username = '', this.password = ''
        this.login = true
      }else {
        this.registerFrom = {
          nickname: '',
          account: '',
          password: '',
          password1: '',
          captcha: '',
        }
        this.login = false
      }
    }

  },
}
</script>
<style lang="scss" scoped>
.login {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  padding: 0;
  overflow: hidden;
  &::before {
    content: 'L';
    position: absolute;
    top: -100px;
    right: -20px;
    display: block;
    font-weight: 600;
    font-size: 220px;
    color: #B1F2E0;
    transform: rotateZ(-25deg);
  }
  &::after {
    content: '';
    position: absolute;
    bottom: -80px;
    left: -100px;
    display: block;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    border: 30px solid #CED0F9;
  }
  .loginBox, .registerBox {
    width: 100%;
    padding: 30px;
    .title {
      text-align: left;
      font-size: 24px;
      margin-bottom: 40px;
    }
  }
  .bottomBox {
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    font-size: 14px;
    color: #333;
  }
}
</style>